<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="60vw" append-to-body class="xqLog">
      <div class="boxX">
        <div class="boxX_top">
          <div class="yuan" style="background-color: #478BFE;"><img src="@/assets/hb_img/logo/hbxx.png" alt=""></div>
          <span>航标信息</span>
        </div>
        <div class="boxX_con">
          <el-row>
            <el-col v-for="(item, i) in zdList" :key="i" :span="12" style="margin-bottom: 10px;">
              <div><span class="text_label">{{ item.label }}</span><span>{{ form[item.code] ? form[item.code] : "--"
                  }}</span><span>{{ item.unit }}</span></div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fgx"></div>
      <!-- <div class="boxX">
        <div class="boxX_top">
          <div class="yuan" style="background-color: #67C23A;"><img src="@/assets/hb_img/logo/nytxx.png" alt=""></div>
          <span>能源微基站数据</span>
        </div>
        <div class="boxX_con">
          <el-row>
            <el-col v-for="(item, i) in jzZdList" :key="i" :span="8" style="margin-bottom: 10px;">
              <div><span class="text_label">{{ item.label }}</span><span>{{ form[item.code] ? form[item.code] : "--"
                  }}</span><span>{{ item.unit }}</span></div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fgx"></div> -->
      <div class="boxX">
        <div class="boxX_top">
          <div class="yuan" style="background-color: #FF8316;"><img src="@/assets/hb_img/logo/hbdxx.png" alt=""></div>
          <span>航标灯数据</span>
        </div>
        <div class="boxX_con">
          <el-row>
            <el-col v-for="(item, i) in hbdzdList" :key="i" :span="6" style="margin-bottom: 10px;">
              <div><span class="text_label">{{ item.label }}</span><span>{{ form[item.code] ? form[item.code] : "--"
                  }}</span><span>{{ item.unit }}</span></div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fgx"></div>
      <div class="boxX">
        <div class="boxX_top">
          <div class="yuan" style="background-color: #907EE9;"><img src="@/assets/hb_img/logo/ykxx.png" alt=""></div>
          <span>遥控操作及状态</span>
        </div>
        <div class="boxX_con">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="遥控操作">
            </el-table-column>
            <el-table-column prop="name" label="信息状态">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {

  props: {
    title: {
      type: String,
      default: "",
    },
  },
  //变量
  data() {
    return {
      open: false,
      tableData: [],
      form: { mc: "123" },
      zdList: [
        { label: "航标名称：", code: "mc", unit: "" },
        { label: "航标编号：", code: "zdXlh", unit: "" },
        { label: "航标状态：", code: "onlineStatus", unit: "" },
        { label: "航标ID：", code: "id", unit: "" },
        { label: "航标位置：", code: "locationS", unit: "" },
        { label: "摄像头数量：", code: "a", unit: "" },
      ],
      jzZdList: [
        { label: "电压：", code: "voltage", unit: "" },
        { label: "电流：", code: "electriccurrent", unit: "" },
        { label: "电能：", code: "electricEnergy", unit: "" },
        { label: "功率：", code: "power", unit: "" },
        { label: "温度：", code: "temperature", unit: "" },
        { label: "门禁状态：", code: "mjzt", unit: "" },
      ],
      hbdzdList: [
        { label: "状态：", code: "dzt", unit: "" },
        { label: "经度：", code: "dqGpsLon", unit: "" },
        { label: "纬度：", code: "dqGpsLat", unit: "" },
        { label: "电能：", code: "electricEnergy", unit: "" },
        { label: "工作电压：", code: "dqDqGzdy", unit: "" },
        { label: "工作电流：", code: "dqDqGzdl", unit: "" },
        { label: "充电电量：", code: "cddl", unit: "" },
        { label: "湿度：", code: "humidity", unit: "" },
        { label: "运行模式：", code: "hbdszYxms", unit: "" },
        { label: "灯状态：", code: "dzt", unit: "" },
        { label: "低功耗状态：", code: "xtztDgh", unit: "" },
        { label: "终端GPS状态：", code: "xtztzdgps", unit: "" },
        { label: "日光阈值：", code: "hbdDqRgyz", unit: "" },
      ],
    }
  },
  //初始
  mounted() { },
  //事件
  methods: {
    getInit(data) {
      this.open = true
      this.form = {...data,location:[data.zdGpsLon,data.zdGpsLat],locationS:`${data.zdGpsLon},${data.zdGpsLat}` }
    }
  },
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped>
.xqLog ::v-deep .el-dialog__header {
  background: rgba(0, 0, 0, 0.02) !important;
}

.xqLog ::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}

.fgx {
  margin: 10px 0;
  border: 0;
  border-top: 1px dashed #a2a9b6;
}

.boxX {}

.boxX_top {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.yuan {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text_label {
  color: rgba(0, 0, 0, 0.30);
}
</style>